<template>
    <div class="bg">
        <div class="login">

            <el-form  :model="ruleForm"  :status-icon="value"  ref="rulesForm" :rules="rules" class="demo-ruleForm">
                <h2 class="title">用户登录</h2>
                <el-form-item label="用户名" prop="username" class="ff">
                    <el-input type="text" v-model="ruleForm.username" autocomplete="on"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="login" autocomplete="on"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="login-btn"  @click="login">提交</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "Login",
        data(){
            return {
                ruleForm:{
                    username:"",
                    password:"",
                },
                rules:{
                    username: [
                        { required: true,  message: '请输入用户名称', trigger: 'blur' },

                    ],
                    password: [

                        { required: true,min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ],
                },
                value:true
            }
        },
        methods:{
            hh(){
                console.log("嘿嘿哈哈enter可行")//@keyup.enter在封装组件中需要加修饰符native才生效。
            },
            login(){

                //打印错误
                this.$refs.rulesForm.validate((res)=>{

                    if(!res){
                        console.log(res,"jj");
                       return ;
                    }
                });



                this.$myhttp.post('login',this.ruleForm)
                    .then((respon)=>{
                        if(respon.data.meta.status===200){
                            console.log(respon);
                            localStorage.setItem('token',respon.data.data.token);
                            //alert('登录成功');
                            this.$message({
                                message: '恭喜您登陆成功',
                                type: 'success'
                            });
                            this.$router.push('/');
                        }else{
                            this.$message({
                                message: '账号或密码不正确',
                                type: 'warning'
                            });
                        }
                    })
            },

        }

    }
</script>

<style lang="stylus" scoped>
.bg
    width:100%
    height:100%
    background:#6a6a6a
    position:relative
    .login
        position:absolute
        padding:20px
        width:500px
        //height:400px
        border-radius:5px
        background:#fff
        top: 50%
        left: 50%
        transform :translate(-50%,-50%)
        .title
            font-size:20px
            font-weight:700
        .ff
            margin-bottom:20px
        .login-btn
            width:100%
    /*表单验证正确显示绿色小对勾，添加用户*/
    .el-icon-circle-check{
        color:green;
        font-weight:700 !important;
    }
</style>
